<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>淘淘游-信息</title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <style>
    	.mui-bar-nav~.mui-content{
    		padding-top: 60px;
    	}
    	.mui-info{
    		text-align: center;
    		padding: 10px 0px;
    		background: #fff;
    	}
    	.mui-info .mui-user-photo{
			width: 60px;
			height: auto;
			border-radius: 50%;
			vertical-align: middle;
		}
		.mui-info .mui-user-word{
			padding: 10px;
			font-size: 16px;
			color: #00B281;
		}
		.mui-info .mui-user-info-list{
			text-align: left;
			list-style: none;
			padding: 0px 15px;
		}
		.mui-info .mui-user-info-list li{
			/*border-bottom: 1px dashed #00B281;*/
		}
		.mui-info .mui-user-info-list label span{
			color: #00B281;
		}
		.mui-info .mui-user-info-list label{
			width: 30%;
		}
		.mui-info .mui-user-info-list input{
			margin: 0;
			height: 44px;
			width: 69%;
			border: 1px solid #fff;
		}
		.mui-input-group .mui-input-row:after{
			background-color: #fff;
		}
		.mui-input-group:before,.mui-input-group:after{
			background-color: #fff;
		}
		#set-info{
			display: block;
			width: 40px;
			height: 40px;
			line-height: 40px;
			border-radius: 50%;
			border: 1px solid #00B281;
			margin: 0 auto;			
			color: #00B281;
		}
		#set-info span{
			font-size: 30px;
		}
    </style>
</head>
<body>
	<!--单页面开始-->
	<div id="info" class="mui-page">
		<!--页面标题栏开始-->
		<div class="mui-navbar-inner mui-bar mui-bar-nav">
			<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-left-nav"></span>
			</button>
			<h1 class="mui-center mui-title">信息</h1>
		</div>
		<form class="mui-content mui-info" id="form-info">
			<img class="mui-user-photo" src="images/girl/girl-18.png"/>
	    	<p class="mui-user-word">淘游满天下  欢乐溢苍穹</p>
	    	<ul class="mui-user-info-list">
	    		<li class="mui-input-row"><label><span class="mui-icon mui-icon-person"></span> 姓名</label> <input name="user-name" id="user-name" value="陈景芝" disabled="disabled"/></li>
	    		<li class="mui-input-row"><label><span class="mui-icon mui-icon-paperclip"></span> 年龄</label> <input type="text" name="user-age" id="user-age" value="26" disabled="disabled"/></li>
	    		<li class="mui-input-row"><label><span class="mui-icon mui-icon-paperplane"></span> 性别</label> <input  type="text" name="user-sex" id="user-sex" value="女" disabled="disabled"/></li>
	    		<li class="mui-input-row"><label><span class="mui-icon mui-icon-phone"></span> 手机</label> <input type="text" name="user-phone" id="user-phone" value="13437109999" disabled="disabled"/></li>
	    		<li class="mui-input-row"><label><span class="mui-icon mui-icon-email"></span> 邮箱</label> <input type="text" name="user-emai" id="user-emai" value="1303155999@qq.com" disabled="disabled"/></li>
	    		<li class="mui-input-row"><label><span class="mui-icon mui-icon-star"></span> 生日</label> <input type="text" name="user-birthday" id="user-birthday" value="2016-05-21" disabled="disabled"/></li>
	    	</ul>
	    	<a id="set-info"><span class="mui-icon mui-icon-compose"></span></a>
		<form>
	</div>
	 <script type="text/javascript" charset="UTF-8">
	 	(function($, doc) {
      		mui.init();
      		var setInfo = doc.getElementById('set-info');
      		setInfo.addEventListener("tap",function(){
				$.openWindow({
					url:"setInfo.html",
					id: 'setInfo',
					show: {
						aniShow: 'pop-in'
					},
					styles: {
						popGesture: 'hide'
					},
					waiting: {
						autoShow: false
					}
				});
			});
    	})(mui, document);
    </script>
</body>
</html>